﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <base href="/netctoss/"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>NetCTOSS</title>
        <link type="text/css" rel="stylesheet" media="all" href="styles/global.css" />
        <link type="text/css" rel="stylesheet" media="all" href="styles/global_color.css" />
        <script language="javascript" type="text/javascript">
            //写入下拉框中的年份和月份
            function initialYearAndMonth() {
                //写入最近3年
                var yearObj = document.getElementById("selYears");
                var year = (new Date()).getFullYear();
                for (var i = 0; i <= 2; i++) {
                    var opObj = new Option(year - i, year - i);
                    yearObj.options[i] = opObj;
                }
                //写入 12 月
                var monthObj = document.getElementById("selMonths");
                var opObj = new Option("全部", "全部");
                monthObj.options[0] = opObj;
                for (var i = 1; i <= 12; i++) {
                    var opObj = new Option(i, i);
                    monthObj.options[i] = opObj;
                }
            }
        </script>
        <style type="text/css">
            li {
                list-style: none;
                float: left;
            }
        </style>
    </head>
    <body onload="initialYearAndMonth();">
        <div id="navibar"></div>
        <!--导航区域结束-->
        <!--主要区域开始-->
        <div id="main">
            <form action="" method="">
                <!--查询-->
                <div class="search_add">                        
                    <div>搜索：<input type="text" class="text_search" v-model="keywords"/></div>
                    <div>
                        <select class="select_search" id="selYears">
                        </select>
                        年
                        <select class="select_search" id="selMonths">
                        </select>
                        月
                    </div>
                    <div><input type="button" value="搜索" class="btn_search" @click="selectPage(1,5)"/></div>
                </div>  
                <!--数据区域：用表格展示数据-->     
                <div id="data">            
                    <table id="datalist">
                    <tr>
                        <th class="width50">账单ID</th>
                        <th class="width70">姓名</th>
                        <th class="width150">身份证</th>
                        <th class="width150">账务账号</th>
                        <th>费用</th>
                        <th class="width100">月份</th>
                        <th class="width100">支付方式</th>
                        <th class="width100">支付状态</th>                                                        
                        <th class="width50"></th>
                    </tr>
                    <tr v-for="bill in pageInfo.list">
                        <td>{{bill.billId}}</td>
                        <td><span v-html="bill.accountName"></span></td>
                        <td><span v-html="bill.idcardNo"></span></td>
                        <td>{{bill.accountId}}</td>
                        <td>{{bill.billCost}}</td>
                        <td>{{bill.billMonth}}</td>
                        <td>
                            <span v-if="bill.payMode==0">现金</span>
                            <span v-else-if="bill.payMode==1">银行转账</span>
                            <span v-else-if="bill.payMode==2">支付宝</span>
                            <span v-else-if="bill.payMode==3">微信</span>
                            <span v-else-if="bill.payMode==4">其他</span>
                        </td>
                        <td>
                            <span v-if="bill.payState==0">未支付</span>
                            <span v-else-if="bill.payState==1">已支付</span>
                        </td>
                        <td><a href="bill_item.html" title="账单明细">明细</a></td>
                    </tr>

                </table>
                
                <p>业务说明：<br />
                1、设计支付方式和支付状态，为用户自服务中的支付功能预留；<br />
                2、只查询近 3 年的账单，即当前年和前两年，如2013/2012/2011；<br />
                3、年和月的数据由 js 代码自动生成；<br />
                4、由数据库中的ｊｏｂ每月的月底定时计算账单数据。</p>
                </div>                    
                <!--分页-->
                <div id="pages">
                    <li><a @click="selectPage(1,pageInfo.pageSize)">首页</a></li>
                    <li><a @click="pageInfo.isFirstPage==true?selectPage(1,pageInfo.pageSize):selectPage(pageInfo.prePage,pageInfo.pageSize)">上一页</a></li>
                    <li v-for="i in pageInfo.navigatepageNums" :class="[pageInfo.pageNum==i?'current_page':'']"><a @click="selectPage(i,pageInfo.pageSize)">{{i}}</a></li>
                    <li><a @click="pageInfo.isLastPage==true?selectPage(pageInfo.pages,pageInfo.pageSize):selectPage(pageInfo.nextPage,pageInfo.pageSize)">下一页</a></li>
                    <li><a @click="selectPage(pageInfo.pages,pageInfo.pageSize)">末页</a></li>
                </div>
            </form>
        </div>
        <div>
            <script type="text/javascript" src="jquery/jquery.js"></script>
            <script type="text/javascript" src="vue/vue.js"></script>
            <script type="text/javascript" src="vue/axios.js"></script>
            <script type="text/javascript" src="js/bill/index.js"></script>
            <script type="text/javascript" src="layer/layer.js"></script>
        </div>
        <script>
            $(function(){//页面加载完成后加载
                //load（网页）  在组件加载的时候，发送ajax请求获取服务器返回回来的页面内容
                $("#navibar").load("html/common/navibar.html");
            })
        </script>
    </body>
</html>
